<template>
  <view class="root">
    <view class="policeTitle">
      <u--input v-model.trim="searchValue" :maxlength="15" placeholder="请输入车牌号" prefixIcon="search" border="surround"
        clearable @change="changeHandle" class="cus-input"></u--input>
    </view>

    <view class="policenameClass">
      <view class="position-wrap" v-for="item in policeList" @click="rdioHandle(item)">
        <view class="position-name">
          <text> {{ item.carNumber }}</text>
        </view>
      </view>
    </view>

    <view class="pageBottom" v-if="pageBottom" style="padding: 25rpx 0">
      —— 到底了 ——
    </view>
    <view v-if="!policeList.length">
      <u-empty mode="list" text="什么都没找到！" :icon="baseImgUrl + 'no-icon7.png'">
      </u-empty>
    </view>
  </view>
</template>

<script>
  import {
    getCarNumberList
  } from "@/api/myself.js";
  import {
    getOptionsParams,
    navBack
  } from "@/utils/util.js";

  export default {
    name: "selectCarNumber",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        options: {},
        searchValue: "",
        policeList: [],
        pageBottom: false,
        pageConfig: {
          pageNo: 1,
          pageSize: 50,
          total: 0,
        },
        routerParams: {}
      };
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      console.log(this.routerParams)
      this.getSeleList();
    },
    methods: {
      changeHandle(e) {
        this.policeList = [];
        this.getSeleList();
      },
      rdioHandle(item) {
        uni.$emit("selectedCarId", item);
        navBack();
      },

      getSeleList() {
        let data = {
          companyMessageId: this.routerParams.companyMessageId,
          carNumber: this.searchValue
        };

        getCarNumberList(data).then((res) => {
          this.policeList = res.result || [];
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .root {
    flex: 1;
    padding: 0 15rpx;
    background: #f9f9f9;

    .policenameClass {
      margin-top: 18rpx;
      border-radius: 8rpx;
      background-color: #fff;

      .position-wrap {
        height: 100rpx;
        margin-left: 60rpx;
        margin-right: 16rpx;
        padding: 18rpx 0;
        border-bottom: 1rpx solid #e8e8e8;

        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .position-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          position: relative;

          text {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 30rpx;
            color: #181818;
          }
        }

        .position-addr {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: PingFang SC, PingFang SC;
          color: #6a6a6a;

          .add-detail {
            font-weight: 500;
            font-size: 24rpx;
            width: 548rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .distanc {
            font-weight: 400;
            font-size: 26rpx;
          }
        }
      }
    }
  }

  ::v-deep .u-icon,
  .u-icon__icon {
    position: absolute;
    left: -40rpx;
  }
</style>